<template>
	<!-- 酒店订单详情： -->
	<view class="hotel-order-details mainbgc padding-b" v-show="show">
		<!-- 待支付： -->
		<view class="waitToPay ffffff flexC" v-if="dataAll.checkinfo==1">
			<view class="margin-top titleFontS">待支付</view>
			<view class="margin-top infoFontS">订单已提交，{{dataAll.itemend}}后未支付将自动取消</view>
			<view class="btn-box flexleft margin-top margin-bottom">
				<view class="quxiao" @click="cancelorder(listid)">取消</view>
				<view class="zhifu" @click="atoncepay(item)">立即支付</view>
			</view>
		</view>
		<!-- 待入住： -->
		<view class="waitToLive ffffff flexC" v-if="dataAll.checkinfo==2">
			<view class="margin-top titleFontS">待入住</view>
			<view class="margin-top infoFontS">请您在{{dataAll.start_date_text}}前入住</view>
			<view class="btn-box flexleft margin-top margin-bottom">
				<view class="quxiao quxiao2"  @click="cancelorder(listid)">取消</view>
			</view>
		</view>
		<!-- 已入住： -->
		<view class="living ffffff flexC" v-if="dataAll.checkinfo==3">
			<view class="margin-top titleFontS">已入住</view>
			<view class="margin-top infoFontS margin-bottom">请您在{{dataAll.end_date_text}}前住离</view>
		</view>
		<!-- 已完成： -->
		<view class="done ffffff flexC" v-if="dataAll.checkinfo==5">
			<view class="margin-top titleFontS">已完成</view>
			<view class="margin-top infoFontS margin-bottom">感谢您的支持，期待您的下次入住！</view>
		</view>
		<view class="top_bottom">
			<view class="zhifujine">
				<view class="quli">入离日期</view><view class="time">{{dataAll.start_date_text}}至{{dataAll.end_date_text}}</view>
			</view>
			<view class="zhifujine jine">
			  <view class="quli">商品总价</view><view class="time">￥{{dataAll.total_price}}</view>
			</view>
			<view class="zhifujine jine" v-if="dataAll.score!==0">
			  <!-- <view class="quli">积分抵扣</view><view class="time">￥{{allowscorePrice}}</view> -->
			  <view class="quli">积分抵扣</view><view class="time">￥{{dataAll.favourable_price}}</view>
			</view>
			<view class="zhifujine jine">
			  <view class="quli">实际支付</view><view class="time">￥{{dataAll.pay_price}}</view>
			</view>
		</view>
		<!-- 房屋信息： -->
		<view class="hotel-content mainpadding ffffff margin-top">
			<view class="title">房屋信息</view>
			<view class="hotel-content-details margin-top flexleft2" v-for="item in dataAll.goods" :key="item.id">
				<view class="img margin-right">
					<image :src="item.images_text" mode=""></image>
				</view>
				<view class="content-box">
					<view class="content-text contentTextS margin-right lhxiankuan">{{item.shop_type_name}}</view>
					<view class="price margin-top">￥{{item.shop_price}}</view>
				</view>
				<!-- <view class="right_icon"></view> -->
			</view>
			<view class="hotel-address-box margin-top ffffff flexleft2">
				<view class="aADFontS">
					<view class="address">{{dataAll.shop.address}}</view>
					<view class="distance margin-top">据您直线距离{{dataAll.shop.distance}}</view>
				</view>
				<view class="AddImg" @click="openlocation">
					<image src="../../static/images/scenic/address.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 订单信息：-->
		<view class="order-info margin-top ffffff mainpadding">
			<view class="order-info-title">订单信息</view>
			<view class="orderNumber margin-top flexleft2" @click="copy(dataAll.order_no)">
				<view class="orderNumberTitleS margin-right">订单编号：</view>
				<view class="flex1 numberTextS">{{dataAll.order_no}}</view>
				<view class="copy">复制</view>
			</view>
			<view class="orderNumber margin-top flexleft2">
				<view class="orderNumberTitleS livePeople">入住人：</view>
				<view class="flex1 numberTextS">{{dataAll.proposer[0].name}}</view>
			</view>
			<view class="orderNumber margin-top flexleft2">
				<view class="orderNumberTitleS margin-right">联系电话：</view>
				<view class="flex1 numberTextS">{{dataAll.proposer[0].mobile}}</view>
			</view>
			<view class="orderNumber margin-top flexleft2">
				<view class="orderNumberTitleS margin-right">支付方式：</view>
				<view class="flex1 numberTextS">{{dataAll.pay_type==10?"微信支付":"余额支付"}}</view>
			</view>
			<view class="orderNumber margin-top flexleft2">
				<view class="orderNumberTitleS margin-right">下单时间：</view>
				<view class="flex1 numberTextS">{{dataAll.createtime_text}}</view>
			</view>
		</view>
		<!-- 已完成——评论按钮： -->
		<view class="done-btn-box flexleft  mainpadding" v-if="dataAll.checkinfo==4">
			<view class="commentBtn" @click="toComment()">立即评论</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				lat: "",
				lng: "",
				dataAll: {},
				allowscorePrice:'',// 积分抵扣金额
				
				show:false,
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		onShow() {
			this.getlocation()
		},
		methods: {
			// 取消订单
			cancelorder(id) {
				httpRequest.modal('', '确认取消当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('api/order/cancelOrder', 'POST', {
							id
						}).then(res => {
							httpRequest.toast(res.msg)
							this.init()
						})
					}
				})
			},
			// 立即支付
			atoncepay(item){
				let data = {
					id:this.listid,
					pay_price:this.dataAll.pay_price,
					allscore:this.dataAll.allow_score,
					type:1
				}
				uni.navigateTo({
					url:'/pages/hotel/hotelorder?msg=' + encodeURIComponent(JSON.stringify(data))
				})
			},
			openlocation(){
				uni.openLocation({
				     latitude: Number(this.dataAll.shop.latitude),//即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
				     longitude:Number(this.dataAll.shop.longitude),//即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
				     name: this.dataAll.shop.name,//即将传到高德或腾讯地图的店铺名称
				     address: this.dataAll.shop.address,//即将传到高德或腾讯地图的详细地址
				     scale: 18
				})
			},
			// 小程序获取当前位置信息
			getlocation() {
				let _this = this
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: function(res) {
						//逆地址解析  坐标转地址信息
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					}
				});
			},
			init() {
				let _this = this;
				httpRequest.request('api/order/detail', 'GET', {
					id: this.listid,
					lat: this.lat,
					lng: this.lng
				}, false, false, false).then(res => {
					this.show=true
					if (res.code == 1) {
						this.dataAll = res.data
						console.log(this.dataAll)
						this.$set(this.dataAll, "itemend", "")
						this.dataAll.itemend = this.djstime(this.dataAll.expire_tme)
						setInterval(() => {
							this.dataAll.itemend = this.djstime(this.dataAll.expire_tme)
						}, 1000)
						this.scoreToPrice(this.dataAll.allow_score)
					}
				}).catch(err => {
					this.show=true
					httpRequest.toast(err.msg);
				})
			},
			// 积分抵扣换算
			scoreToPrice(data){
				httpRequest.request('api/user/scoreToPrice', 'GET', {
					allow_score:data
				},false,false,true).then(res => {
					// console.log(res);
					this.allowscorePrice = res.data.price
				})
			},
			djstime(endTime) {
				let startTime = (Date.parse(new Date())) / 1000;
				var timestamp = (Date.parse(new Date())) / 1000; //计算当前时间戳 (毫秒级)
				var date1 = ""; //开始时间
				if (timestamp < startTime) {
					date1 = startTime;
				} else {
					date1 = timestamp; //开始时间
				}
				var date2 = endTime; //结束时间
				// var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
				var date3 = (date2 - date1) * 1000; //时间差的毫秒数
				//计算出相差天数
				var days = Math.floor(date3 / (24 * 3600 * 1000));
				//计算出小时数
				var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
				var hours = Math.floor(leave1 / (3600 * 1000));
				//计算相差分钟数
				var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
				var minutes = Math.floor(leave2 / (60 * 1000));
				//计算相差秒数
				var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
				var seconds = Math.round(leave3 / 1000);
				if (hours < 10) {
					hours = "0" + hours
				}
				if (minutes < 10) {
					minutes = "0" + minutes
				}
				if (seconds < 10) {
					seconds = "0" + seconds
				}
				return hours + "小时" + minutes + "分钟"
			},
			toComment() {
				uni.navigateTo({
					url: '/pages/my/fabiaopl?id='+this.listid
				})
			},
			// 复制订单号
			copy(content){
				uni.setClipboardData({
					data:content,
					success() {
						httpRequest.toast("复制成功")
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// .hotel-order-details {
	// 	position: relative;
	// 	// padding-top: 30rpx;
	// }

	.titleFontS {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.infoFontS {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.quxiao {
		padding: 8rpx 50rpx;
		border: 2rpx solid #666666;
		border-radius: 30rpx;
		margin-right: 86rpx;
	}

	.zhifu {
		padding: 8rpx 30rpx;
		border-radius: 30rpx;
		margin-right: 25rpx;
		background-color: #00D2E1;
		color: #fff;
		border: 2rpx solid #00D2E1;
	}

	.flexC {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.margin-bottom {
		margin-bottom: 30rpx;
	}

	.quxiao2 {
		margin-right: 0;
	}

	.dateFontS {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.dateTextS {
		color: #666666;
	}

	.title {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 19rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.content-box {
		flex: 1;
	}

	.contentTextS {
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.price {
		color: #FF5C00;
	}

	.textLine {
		text-decoration: line-through;
		color: #999999;
		margin-left: 10rpx
	}

	.aADFontS {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.AddImg {
		width: 52rpx;
		height: 52rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.order-info-title {
		font-size: 36rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.flex1 {
		flex: 1;
	}

	.copy {
		color: #00D2E1;
	}

	.orderNumberTitleS {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.numberTextS {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.livePeople {
		margin-right: 50rpx;
	}

	.commentBtn {
		padding: 8rpx 30rpx;
		border: 2rpx solid #00D2E1;
		border-radius: 30rpx;
		color: #00D2E1;
	}

	.done-btn-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.commentBtn {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
	}
	.quli{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		line-height: 33rpx;
		white-space: nowrap;
		margin-right: 20rpx;
	}
	.time{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 33rpx;
	}
	.zhifujine{
		display: flex;
	}
	.jine{
		margin-top: 18rpx;
	}
	.top_bottom{
		background-color: #FFFFFF;
		padding: 30rpx;
		margin-top: 20rpx;
	}
</style>
